<template>
    <el-container>
        <div class="header">
            <div class="left">
                <div style="display: flex;align-items: center">
                    导入表单:
                    <el-select v-model="strangeDoctor" placeholder="陌生医生信息" style="width: 150px;margin-left: 10px;"
                        filterable @change="dataChange">
                        <el-option label="陌生医生信息" value="陌生医生信息"></el-option>
                        <el-option label="专家信息" value="专家信息"></el-option>
                        <el-option label="医院信息" value="医院信息"></el-option>
                        <el-option label="交易明细" value="交易明细"></el-option>
                        <el-option label="区域映射" value="区域映射"></el-option>
                        <!-- <el-option label="政策信息" value="政策信息"></el-option> -->
                        <!-- 物料名称无导入 -->
                        <el-option label="物料名称填报" value="物料名称填报"></el-option>
                    </el-select>
                </div>
                <el-button v-if="strangeDoctor != '物料名称填报'" type="primary" @click="toLead">导入</el-button>
            </div>
            <div class="right3" v-if="strangeDoctor == '陌生医生信息'">
                <div style="display: flex;align-items: center">
                    登记会议:
                    <el-select v-model="search.registrationMeeting" placeholder="选择登记会议"
                        style="width: 150px;margin-left: 10px;" filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in meetingList" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </div>

                <!-- <div style="display: flex;align-items: center">
                    大区:
                    <el-select v-model="search.area" placeholder="陌生医生信息" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in productSpecList" :key="index" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </div> -->

                <div style="display: flex;align-items: center">
                    省份:
                    <el-select v-model="search.province" placeholder="选择省份" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in provinceList" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </div>
                <el-button type="primary" @click="exportDetail">导出</el-button>

            </div>

            <div class="right3" v-if="strangeDoctor == '专家信息'">


                <div style="display: flex;align-items: center">
                    大区:
                    <el-select v-model="search.area" placeholder="选择大区" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <!-- <el-option v-for="(item, index) in productSpecList" :key="index" :label="item"
                            :value="item"></el-option> -->
                        <el-option label="华南" value="华南"></el-option>
                        <el-option label="华中" value="华中"></el-option>
                        <el-option label="华东" value="华东"></el-option>
                        <el-option label="西南" value="西南"></el-option>
                        <el-option label="西北" value="西北"></el-option>
                        <el-option label="东北" value="东北"></el-option>
                    </el-select>
                </div>

                <div style="display: flex;align-items: center">
                    省份:
                    <el-select v-model="search.province" placeholder="选择省份" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in provinceList" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </div>

                <div style="display: flex;align-items: center">
                    专家熟悉程度:
                    <el-select v-model="search.expertFamiliarity" placeholder="选择数据"
                        style="width: 150px;margin-left: 10px;" filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in expertFamiliarityList" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </div>
                <el-button type="primary" @click="exportDetail">导出</el-button>

            </div>

            <div class="right3" v-if="strangeDoctor == '医院信息'">


                <!-- <div style="display: flex;align-items: center">
                    大区:
                    <el-select v-model="search.area" placeholder="陌生医生信息" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in productSpecList" :key="index" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </div> -->

                <div style="display: flex;align-items: center">
                    省份:
                    <el-select v-model="search.province" placeholder="选择省份" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in provinceList" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </div>

                <div style="display: flex;align-items: center">
                    城市:
                    <el-select v-model="search.city" placeholder="选择城市" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in cityList" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </div>

                <div style="display: flex;align-items: center">
                    医院类型:
                    <el-select v-model="search.hospitalName" placeholder="选择医院类型"
                        style="width: 150px;margin-left: 10px;" filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in nameList" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </div>
                <el-button type="primary" @click="exportDetail">导出</el-button>

            </div>

            <div class="right" v-if="strangeDoctor == '交易明细'">
                <div style="display: flex;align-items: center">
                    日期区间：
                    <el-date-picker v-model="dateInterval" type="monthrange" range-separator="To"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange" />
                </div>

                <div style="display: flex;align-items: center">
                    大区:
                    <el-select v-model="search.area" placeholder="选择大区" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <el-option label="华南" value="华南"></el-option>
                        <el-option label="华中" value="华中"></el-option>
                        <el-option label="华东" value="华东"></el-option>
                        <el-option label="西南" value="西南"></el-option>
                        <el-option label="西北" value="西北"></el-option>
                        <el-option label="东北" value="东北"></el-option>
                    </el-select>
                </div>

                <div style="display: flex;align-items: center">
                    省份:
                    <el-select v-model="search.province" placeholder="选择省份" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in provinceList" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </div>

                <div style="display: flex;align-items: center">
                    城市:
                    <el-select v-model="search.city" placeholder="选择城市" style="width: 150px;margin-left: 10px;"
                        filterable clearable @change="selectChange">
                        <el-option v-for="(item, index) in cityList" :key="index" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </div>
                <el-button type="primary" @click="exportDetail">导出</el-button>

            </div>

            <div class="right2" v-if="strangeDoctor == '区域映射'">
                <div style="display: flex;align-items: center">
                    年份选择：
                    <el-date-picker v-model="year" @change="yearChange" type="year" placeholder="选择年份" />
                </div>


            </div>

        </div>
        <scFileImport ref="scFileImport" :apiObj="importApi" :maxSize="30" hideButton @success="handleImportSuccess">
        </scFileImport>

        <el-header style="display: none"></el-header>

        <el-main class="nopadding">
            <scTable v-if="strangeDoctor == '专家信息'" ref="table" :apiObj="apiObj" border :params="search" stripe
                remoteSort remoteFilter @selection-change="selectionChange">
                <el-table-column label="大区" prop="area" width="180" align="center"></el-table-column>
                <el-table-column label="省份" prop="province" width="180" align="center"></el-table-column>
                <el-table-column label="地市" prop="city" width="180" align="center"></el-table-column>
                <el-table-column label="专家姓名" prop="name" width="180" align="center"></el-table-column>
                <el-table-column label="性别" prop="sex" width="180" align="center"></el-table-column>
                <el-table-column label="专家熟悉程度" prop="expertFamiliarity" width="180" align="center"></el-table-column>
                <el-table-column label="联系方式" prop="contactInformation" width="180" align="center"></el-table-column>
                <el-table-column label="生日" prop="birth" width="180" align="center"></el-table-column>
                <el-table-column label="专家级别" prop="expertRank" width="180" align="center"></el-table-column>
                <el-table-column label="国家级任职协会" prop="employmentAssociation" width="180"
                    align="center"></el-table-column>
                <el-table-column label="具体分支" prop="specificBranch" width="180" align="center"></el-table-column>
                <el-table-column label="国家协会职务" prop="associationOffice" width="180" align="center"></el-table-column>
                <el-table-column label="省份任职协会" prop="proEmploymentAssociation" width="180"
                    align="center"></el-table-column>
                <el-table-column label="协会职务" prop="associationOfficeP" width="180" align="center"></el-table-column>
                <el-table-column label="医院全称" prop="organizationName" width="180" align="center"></el-table-column>
                <el-table-column label="医院级别" prop="doctorRank" width="180" align="center"></el-table-column>
                <el-table-column label="医院科室" prop="treatmentField" width="180" align="center"></el-table-column>
                <el-table-column label="主攻方向" prop="mainDirection" width="180" align="center"></el-table-column>
                <el-table-column label="医院职务级别" prop="organizationRank" width="180" align="center"></el-table-column>
                <el-table-column label="联络人姓名" prop="contactPeople" width="180" align="center"></el-table-column>
                <el-table-column label="联络人联系方式" prop="contactPhone" width="180" align="center"></el-table-column>
                <el-table-column label="经营模式" prop="businessModel" width="180" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="150">
                    <template #default="scope">
                        <el-button-group>
                            <el-button link type="warning" size="small" @click="del(scope.row.id)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>

            </scTable>

            <scTable v-if="strangeDoctor == '陌生医生信息'" ref="table" :apiObj="apiObj" border :params="search" stripe
                remoteSort remoteFilter @selection-change="selectionChange">
                <el-table-column label="登记会议" prop="registrationMeeting" width="180" align="center"></el-table-column>
                <el-table-column label="姓名" prop="name" width="180" align="center"></el-table-column>
                <el-table-column label="性别" prop="sex" width="180" align="center"></el-table-column>
                <el-table-column label="所在省份" prop="province" width="180" align="center"></el-table-column>
                <el-table-column label="单位名称" prop="unitName" width="180" align="center"></el-table-column>
                <el-table-column label="所在科室" prop="department" width="180" align="center"></el-table-column>
                <el-table-column label="职务等级" prop="jobRank" width="180" align="center"></el-table-column>
                <el-table-column label="联系方式" prop="contactInformation" width="180" align="center"></el-table-column>
                <el-table-column label="跟进人员" prop="follower" width="180" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="150">
                    <template #default="scope">
                        <el-button-group>
                            <el-button link type="warning" size="small" @click="del(scope.row.id)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>

            <scTable v-if="strangeDoctor == '医院信息'" ref="table" :apiObj="apiObj" border :params="search" stripe
                remoteSort remoteFilter @selection-change="selectionChange">
                <el-table-column label="终端名称" prop="terminalName" width="180" align="center"></el-table-column>
                <el-table-column label="唯一编码" prop="code" width="180" align="center"></el-table-column>
                <el-table-column label="省份编码" prop="provinceCode" width="180" align="center"></el-table-column>
                <el-table-column label="省份名称" prop="provinceName" width="180" align="center"></el-table-column>
                <el-table-column label="城市编码" prop="cityCode" width="180" align="center"></el-table-column>
                <el-table-column label="城市名称" prop="cityName" width="180" align="center"></el-table-column>
                <el-table-column label="县区编码" prop="areCode" width="180" align="center"></el-table-column>
                <el-table-column label="县区名称" prop="areName" width="180" align="center"></el-table-column>
                <el-table-column label="医院历史名称" prop="hisName" width="180" align="center"></el-table-column>
                <el-table-column label="医院地址" prop="hospitalAddress" width="180" align="center"></el-table-column>
                <el-table-column label="医院类型" prop="hospitalName" width="180" align="center"></el-table-column>
                <el-table-column label="等级" prop="level" width="180" align="center"></el-table-column>
                <el-table-column label="等次" prop="etc" width="180" align="center"></el-table-column>
                <el-table-column label="所有制" prop="ownership" width="180" align="center"></el-table-column>
                <el-table-column label="发证机构" prop="licenseAuthority" width="180" align="center"></el-table-column>
                <el-table-column label="发证机构地区编码" prop="licenseCode" width="180" align="center"></el-table-column>
                <el-table-column label="发证机构地区" prop="licenseAreaName" width="180" align="center"></el-table-column>
                <el-table-column label="注册证号" prop="registrationNumber" width="180" align="center"></el-table-column>
                <el-table-column label="统一设会信用代码" prop="socialCode" width="180" align="center"></el-table-column>
                <el-table-column label="医保编码" prop="medicareCode" width="180" align="center"></el-table-column>
                <el-table-column label="诊疗科目" prop="treatmentSubjects" width="180" align="center"></el-table-column>
                <el-table-column label="诊疗范围" prop="treatmentScope" width="180" align="center"></el-table-column>
                <el-table-column label="法人" prop="legalPerson" width="180" align="center"></el-table-column>
                <el-table-column label="负责人" prop="charger" width="180" align="center"></el-table-column>
                <el-table-column label="上下级关系" prop="relationship" width="180" align="center"></el-table-column>
                <el-table-column label="执业许可证有效期" prop="licenceValidity" width="180" align="center"></el-table-column>
                <el-table-column label="有效期始" prop="beginningOfValidity" width="180" align="center"></el-table-column>
                <el-table-column label="有效期止" prop="endingOfValidity" width="180" align="center"></el-table-column>
                <el-table-column label="经营状态" prop="operatingState" width="180" align="center"></el-table-column>
                <el-table-column label="经纬度" prop="latitude" width="180" align="center"></el-table-column>
                <el-table-column label="是否目标医院" prop="targetHospitalOrNot" width="180" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="150">
                    <template #default="scope">
                        <el-button-group>
                            <el-button link type="warning" size="small" @click="del(scope.row.id)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>

            <scTable v-if="strangeDoctor == '交易明细'" ref="table" :apiObj="apiObj" border :params="search" stripe
                remoteSort remoteFilter @selection-change="selectionChange">
                <el-table-column label="大区" prop="area" width="180" align="center"></el-table-column>
                <el-table-column label="省份" prop="province" width="180" align="center"></el-table-column>
                <el-table-column label="城市" prop="city" width="180" align="center"></el-table-column>
                <el-table-column label="县区" prop="counties" width="180" align="center"></el-table-column>
                <el-table-column label="时间" prop="time" width="180" align="center"></el-table-column>
                <el-table-column label="年月" prop="month" width="180" align="center"></el-table-column>
                <el-table-column label="品规" prop="specificationModel" width="180" align="center"></el-table-column>
                <el-table-column label="医院" prop="hospital" width="180" align="center"></el-table-column>
                <el-table-column label="采购量" prop="amountPurchased" width="180" align="center"></el-table-column>
                <el-table-column label="标盒" prop="standardBox" width="180" align="center"></el-table-column>
                <el-table-column label="医院等级" prop="hospitalLevel" width="180" align="center"></el-table-column>
                <el-table-column label="商业公司" prop="businessCompany" width="180" align="center"></el-table-column>
            </scTable>

            <scTable v-if="strangeDoctor == '区域映射'" ref="table" :apiObj="apiObj" border :params="search" stripe
                remoteSort remoteFilter @selection-change="selectionChange">
                <el-table-column label="年份" prop="year" align="center"></el-table-column>
                <el-table-column label="大区" prop="area" align="center"></el-table-column>
                <el-table-column label="省份" prop="province" align="center"></el-table-column>
                <el-table-column label="城市" prop="city" align="center"></el-table-column>
            </scTable>

            <scTable v-if="strangeDoctor == '政策信息'" ref="table" :apiObj="apiObj" border :params="search" stripe
                remoteSort remoteFilter @selection-change="selectionChange">
                <!-- <el-table-column label="发布时间" prop="releaseTime" align="center"></el-table-column> -->
                <el-table-column label="发布时间" align="center">
                    <template #default="scope">
                        {{ changeDate(scope.row.releaseTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="政策类型" prop="policyType" align="center"></el-table-column>
                <el-table-column label="政策标题" prop="policyTitle" align="center"></el-table-column>
                <el-table-column label="发布单位" prop="releaseUnit" align="center"></el-table-column>
                <el-table-column label="政策正文" prop="policyText" align="center"></el-table-column>
                <el-table-column label="政策解读" prop="policyInterpretation" align="center"></el-table-column>
            </scTable>
            <scTable v-if="strangeDoctor == '物料名称填报'" ref="table" :apiObj="apiObj" border :params="search" stripe
                remoteSort remoteFilter @selection-change="selectionChange">
                <!-- <el-table-column label="物料名称" prop="logisticsName" align="center"></el-table-column> -->
                <el-table-column label="物料名称" align="center">
                    <template #default="scope">
                        <span v-if='!scope.row.flag' @click="scope.row.flag = !scope.row.flag">{{
                        scope.row.logisticsName
                    }}</span>
                        <el-input v-if='scope.row.flag' v-model="logisticsNameInput" style="width: 240px"
                            placeholder="请输入物料名称" @focus="change(scope.row.logisticsName)"
                            @blur="handleBlur(scope.row)" />
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" align="center" width="150">
                    <template #default="scope">
                        <!-- <el-button-group>
                            <el-button link type="primary " size="small" @click="change(scope.row.id)">编辑</el-button>
                        </el-button-group> -->
                        <el-button-group>
                            <el-button link type="warning" size="small" @click="del(scope.row.id)">删除</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>

        <scFileExport ref="scFileExport" :apiObj="deriveExcel" :post="true" :data="search" fileName="数据导出" hideButton>
        </scFileExport>

    </el-container>
</template>

<script>
export default {
    data() {
        return {
            strangeDoctor: '陌生医生信息',
            importApi: this.$API.dataImporting.importStrangeDoctor,//专家信息导入
            apiObj: this.$API.dataImporting.getStrangeDoctorList,//陌生医生列表
            delObj: this.$API.dataImporting.delete,//陌生医生信息删除
            deriveExcel: this.$API.dataImporting.strangeDoctorexport,//导出功能API
            search: {
                area: '', //大区
                province: '', //省份
                city: '', //城市
                registrationMeeting: '',//登记会议
                expertFamiliarity: '',//专家熟悉程度
                year: '',//年份
                startTime: '',//开始时间
                endTime: '',//结束时间
                hospitalName: '',//医院类型
                provinceName: '',
                cityName: ''
            },
            logisticsNameInput: '',
            meetingList: [],
            provinceList: [],//省列表
            cityList: [],//市列表
            nameList: [],//医院类型列表
            dateInterval: '',//日期区间
            year: '',
            expertFamiliarityList: [],//专家熟悉程度下拉
        }
    },
    created() {
        this.dataChange()
        this.getCity()
        this.render()
        this.getExpertFamiliarityList()
    },
    methods: {
        async render() {
            this.$API.dataImporting.StrangeDoctorList.get().then((res) => {
                this.meetingList = res.data
            })
            this.$API.dataImporting.nameList.get().then((res) => {
                this.nameList = res.data

            })
        },
        dataChange(e) {
            switch (e) {
                case '陌生医生信息':
                    this.importApi = this.$API.dataImporting.importStrangeDoctor
                    this.apiObj = this.$API.dataImporting.getStrangeDoctorList
                    this.delObj = this.$API.dataImporting.delete
                    this.deriveExcel = this.$API.dataImporting.strangeDoctorexport//导出功能API
                    break;
                case '专家信息':
                    this.importApi = this.$API.dataImporting.importExpertInformation
                    this.apiObj = this.$API.dataImporting.getExpertList
                    this.delObj = this.$API.dataImporting.delExpertInformation
                    this.deriveExcel = this.$API.dataImporting.expertInformationExport//导出功能API

                    break;
                case '医院信息':
                    this.importApi = this.$API.dataImporting.importHosptialInformation
                    this.apiObj = this.$API.dataImporting.getHospList
                    this.delObj = this.$API.dataImporting.delHosptialInformation
                    this.deriveExcel = this.$API.dataImporting.hosptialInfoExport//导出功能API

                    break;
                case '交易明细':
                    this.importApi = this.$API.dataImporting.importTransactionDetail
                    this.apiObj = this.$API.dataImporting.getDealDetailList
                    this.deriveExcel = this.$API.dataImporting.transactionDetailExport//导出功能API

                    break;
                case '区域映射':
                    this.importApi = this.$API.dataImporting.importAreaMapping
                    this.apiObj = this.$API.dataImporting.getAreaMappingList
                    break;
                case '政策信息':
                    this.importApi = this.$API.dataImporting.importPolicy
                    this.apiObj = this.$API.dataImporting.getPolicyList
                    break;
                case '物料名称填报':
                    this.apiObj = this.$API.dataImporting.getTransactionDetailList
                    this.delObj = this.$API.dataImporting.TransactionDetailDel
                    break;
                default:
                    break;
            }
        },
        toLead() {
            this.$refs.scFileImport.open()
        },
        handleImportSuccess(res, close) {
            // console.log('qqqqq',res);
            if (!res?.data) {
                return
            }
            this.$message.success(`已成功导入 ${res.data.insertNum} 条数据，更新 ${res.data.updateNum} 行数据`)
            close()
            this.$refs.table.upData()
        },
        async del(id) {
            let res = await this.delObj.post({ data: [{ id }] })
            if (res.data) {
                this.$message.success('删除成功')
            }
            this.$refs.table.upData()

        },
        //导出
        exportDetail() {
            // console.log('导出',this.search);
            this.$refs.scFileExport.open()
        },
        change(e) {
            this.logisticsNameInput = e
        },
        async handleBlur(data) {
            let res = await this.$API.dataImporting.transactionDetailEdit.post({ data: { id: data.id, logisticsName: this.logisticsNameInput } })
            this.$message.success('修改成功')
            data.flag = !data.flag
            this.$refs.table.upData()
        },
        async getCity() {
            let res = await this.$API.dataImporting.getChinaTree.get({})
            res.data.forEach((e) => {
                this.provinceList.push(e.province)
                e.cities.forEach((item) => {
                    this.cityList.push(item.name)
                })
            })
        },
        dateChange(e) {
            
            if (!e) {
                this.search.startTime = null
                this.search.endTime = null
                this.selectChange()
                return
            }
            e.forEach((item, index) => {
                const date = new Date(item);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
                const formattedDate = `${year}${month}`;
                if (index == 0) {
                    this.search.startTime = formattedDate
                } else {
                    this.search.endTime = formattedDate
                }
            })
            this.selectChange()
        },
        yearChange(e) {
            if (!e) {
                this.search.year = ''
                this.selectChange()
                return
            }
            const date = new Date(e);
            this.search.year = date.getFullYear();

            this.selectChange()
        },
        selectChange() {
            console.log('下拉数据', this.search.province, this.search.city);
            this.search.provinceName = this.search.province
            this.search.cityName = this.search.city
            this.$refs.table.upData()
        },
        changeDate(dateString) {
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份补零
            const day = String(date.getDate()).padStart(2, '0'); // 日期补零
            const hours = String(date.getHours()).padStart(2, '0'); // 小时补零
            const minutes = String(date.getMinutes()).padStart(2, '0'); // 分钟补零
            const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒数补零
            const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            return formattedDate
        },
        async getExpertFamiliarityList() {
            let res = await this.$API.dataImporting.expertFamiliarityList.get({})
            this.expertFamiliarityList = res.data

        }
    }
}


</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        width: 320px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
    }

    .right {
        width: 70%;
        display: flex;
        justify-content: space-around;
        padding-right: 20px;

    }

    .right2 {
        width: 25%;
        display: flex;
        justify-content: space-around;
        padding-right: 20px;

    }

    .right3 {
        width: 50%;
        display: flex;
        justify-content: space-around;
        padding-right: 20px;

    }
}
</style>